<!-- 凭证模板 -->
<template>
  <el-row>
    <el-button type="primary" @click="dialogTableVisible = true" class="q">修改</el-button>
    <el-dialog title="编辑凭证模板" :visible.sync="dialogTableVisible" center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称：">
          <el-input v-model="form.w"></el-input>
        </el-form-item>
        <el-form-item label="用途型：">
          <el-input v-model="form.r"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="gridData">
        <el-table-column property="sub" label="会计科目" width="150"></el-table-column>
        <el-table-column property="jie" label="借方" width="200"></el-table-column>
        <el-table-column property="dai" label="贷方"></el-table-column>
        <el-table-column property="bi" label="比例"></el-table-column>
      </el-table>
    </el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe
      :highlight-current-row="true"
      :header-cell-style="{ background: '#ededed', color: '#333' }"
    >
      <el-table-column prop="id" align="center" label="ID" />
      <el-table-column prop="number" align="center" label="编号" />
      <el-table-column
        prop="name"
        align="center"
        width="180"
        label="名称"
      />
      <el-table-column prop="amount" align="center" label="用途" />
      <el-table-column prop="payWay" align="center" label="内容" />
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <!--<el-button @click="handleClick(scope.row)" size="small" type="text">修改</el-button>-->

          <el-button type="text" @click="dialogTableVisible = true">修改</el-button>

          <el-dialog title="编辑凭证模板" :visible.sync="dialogTableVisible" center>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="名称：">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="用途型：">
                <el-input v-model="form.re"></el-input>
              </el-form-item>
            </el-form>
            <el-table :data="gridData">
              <el-table-column property="sub" label="会计科目" width="150"></el-table-column>
              <el-table-column property="jie" label="借方" width="200"></el-table-column>
              <el-table-column property="dai" label="贷方"></el-table-column>
              <el-table-column property="bi" label="比例"></el-table-column>
            </el-table>
          </el-dialog>
          <el-button type="text">开启</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>

<script>
    export default {
        name: "voucher",
      data(){
          return {
            form: {
              name: '盘盈出库单',
              re: '日记账',
              w:'',
              r:'',
            },
            tableData: [{
              id: 1,
              number: 16492,
              name: '天津卓诚科技有限公司',
              amount: '日记账',
              payWay: '购买材料      借：应付账款    贷：库存现金',
            }],
            gridData: [{
              sub: '1101 库存现金',
              jie: '金额',
              dai: '金额',
              bi: '',
            }],
            dialogTableVisible: false,
          }
      }
    }
</script>

<style >
.q{
  float: right;
}
</style>
